<template>
  <view :style="[styles]" class="module-area">
    <view v-for="item in moduleList" :key="$u.guid()">
      <view :style="[item.style]" v-if="item">
        <view v-if="item.items">
          <LowCodeComponents
            v-for="items in item.items"
            :key="items.id"
            :item="items"
          />
        </view>
        <view class="default-area" v-else>
          <u--text
            color="#898686"
            text="请选择装修模块"
            align="center"
          ></u--text>
        </view>
      </view>
    </view>
    <view class="default-area" v-if="!moduleList.length">
      <u--text color="#898686" text="请选择装修模块" align="center"></u--text>
    </view>
  </view>
</template>

<script>
import { COMPREIFX } from "../../../libs/const/widget";

export default {
  name: `${COMPREIFX}module`,
  props: {
    attribute: Object,
    styles: Object,
  },
  components: {
    LowCodeComponents: () => import("../../lc/lc-components.vue"),
  },
  data() {
    return {
      moduleCaches: {},
      moduleList: [],
    };
  },
  watch: {
    "attribute.moduleIds": {
      async handler(val) {
        const moduleJson = [];
        for await (let i of val) {
          let data = {};
          if (this.moduleCaches[i]) {
            data = this.moduleCaches[i];
          } else if (i) {
            data = await this.getModuleInfo(i);
            this.moduleCaches[i] = data;
          }
          moduleJson.push(data);
        }
        this.moduleList = moduleJson;
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    async getModuleInfo(id) {
      const api = this.$widget[this.attribute.api.getModuleInfo];
      if (api) {
        id = id ?? this.attribute.moduleId;
        return await api({ id }).then((res) => {
          const { items, style } = JSON.parse(res.moduleJson);
          return { items, style };
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.module-area {
  overflow: hidden;
}
.default-area {
  width: 100%;
  height: 175rpx;
  background-color: #f1efef;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
